<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
	</head>
	<body>
		<div id="app">
			
			
			<el-container>
				<!--  1.头部 : 第一行内容 -->
				<el-header style="background-color: #0095d7;">
					<h1 style="color:white; font-size: 22px;">
						CoolShark商城后台管理系统
						<span style="float: right; font-size: 15px;">欢迎XX访问酷鲨商城<a href="#">退出</a></span>
					</h1>
				</el-header>
				
				
				<!--  第二行内容 -->
				<el-container>
					<!--  2. 第二行左侧(导航菜单) -->
					<!--  overflow:hidden 的主要功能有三个：隐藏溢出,清除浮动,解除坍塌  -->
					<el-aside width="200px" style="overflow: hidden;">
						
						<el-menu @select="handleSelect"  default-active="1">
												  
						    <!--  class="el-menu-vertical-demo"  -->
						    <el-submenu index="1">
								<!--  添加子菜单标题  --> 
								<!--  通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定  -->
								<template slot="title">
									<i class="el-icon-s-flag"></i>
									<span>分类管理</span>
								</template>
								<el-menu-item index="1-1">
									<i class="el-icon-menu"></i>
									<span slot="title">分类列表</span>
								</el-menu-item>
								<el-menu-item index="1-2">
									<i class="el-icon-menu"></i>
									<span slot="title">添加分类</span>
								</el-menu-item>
						    </el-submenu>	
										
							
							<el-submenu index="2">
								<!--  添加子菜单标题  --> 
								<!--  通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定  -->
								<template slot="title">
									<i class="el-icon-picture"></i>
									<span>轮播图管理</span>
								</template>
								<el-menu-item index="2-1">
									<i class="el-icon-picture"></i>
									<span slot="title">轮播图列表</span>
								</el-menu-item>
								<el-menu-item index="2-2">
									<i class="el-icon-picture"></i>
									<span slot="title">添加轮播图</span>
								</el-menu-item>
							</el-submenu>
							
							
							<el-submenu index="3">
								<!--  添加子菜单标题  --> 
								<!--  通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定  -->
								<template slot="title">
									<i class="el-icon-shopping-cart-2"></i>
									<span>商品管理</span>
								</template>
								<el-menu-item index="3-1">
									<i class="el-icon-shopping-cart-1"></i>
									<span slot="title">商品列表</span>
								</el-menu-item>
								<el-menu-item index="3-2">
									<i class="el-icon-shopping-cart-1"></i>
									<span slot="title">添加商品</span>
								</el-menu-item>
							</el-submenu>
										
						  
						</el-menu>
						
				
					</el-aside>
					
					
					
					
					<!--  3. 第二行右侧主体内容 -->
					<el-main>
						
						
						
						<!--3.1分类表格-->
						<el-table v-if="currentIndex=='1-1'"  :data="categoryArr"  style="width: 100%">
						    <el-table-column type="index" label="编号"  width="180"></el-table-column>
						    <el-table-column prop="name"  label="分类名称"  width="180"></el-table-column>
						    <el-table-column label="操作">
						      <template slot-scope="scope">
						        <el-button
						          size="mini"
						          type="danger"
						          @click="handleDelete(scope.$index, categoryArr)">删除</el-button>
						          <!-- @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
						      </template>
						    </el-table-column>
						</el-table>
						
						
						<!--3.2.轮播图表格-->
						<el-table v-if="currentIndex=='2-1'"  :data="bannerArr"  style="width: 100%">
						    <el-table-column type="index" label="编号"  width="180"></el-table-column>
						    <el-table-column label="轮播图"  width="180">
								<!--自定义内容必须写在template里面-->
								<template slot-scope="scope">
									<img :src="scope.row.url" width="100%"/>
								</template>
							</el-table-column>
						    <el-table-column label="操作">
						      <template slot-scope="scope">
						        <el-button
						          size="mini"
						          type="danger"
						          @click="handleDelete(scope.$index, bannerArr)">删除</el-button>
						          <!-- @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
						      </template>
						    </el-table-column>
						</el-table>
						
						
						<!--3.3.商品表格-->
						<el-table v-if="currentIndex=='3-1'"  :data="productArr"  style="width: 100%">
						    <el-table-column type="index" label="编号"  width="50"></el-table-column>
						    <el-table-column prop="title" label="商品标题"  width="200"></el-table-column>
						    <el-table-column prop="price" label="商品价格"  width="80"></el-table-column>
						    <el-table-column prop="oldPrice" label="商品原价"  width="80"></el-table-column>
						    <el-table-column prop="saleCount" label="商品销量"  width="80"></el-table-column>
							<el-table-column label="商品图片"  width="100">
								<!--自定义内容必须写在template里面-->
								<template slot-scope="scope">
									<img :src="scope.row.url" width="100%"/>
								</template>
							</el-table-column>
						    <el-table-column label="操作">
						      <template slot-scope="scope">
						        <el-button
						          size="mini"
						          type="danger"
						          @click="handleDelete(scope.$index, productArr)">删除</el-button>
						         <!-- @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
						      </template>
						    </el-table-column>
						</el-table>
						
						
					</el-main>
				</el-container>
			</el-container>
			
			
			
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el:"#app",
			data:{
				currentIndex: "1-1",
				categoryArr:[
						{name:"品牌服装"},
						{name:"精品女装"},
						{name:"美食健康"},
						{name:"数码科技"},
						{name:"篮球鞋"}
				],
				bannerArr:[
					{url:"imgs/b1.jpg"},
					{url:"imgs/b2.jpg"},
					{url:"imgs/b3.jpg"},
					{url:"imgs/b4.jpg"}
				],
				productArr:[
					{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233, oldPrice:598, url:"imgs/a.jpg",saleCount:2342},
					{title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
					{title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2344},
					{title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2340}
				]
			},
			methods:{
				handleDelete(index,rows){
					//v.productArr.splice(index,1);
					rows.splice(index,1);
				},
				handleSelect(key,keyPath){
					if(key=='1-2'){
						v.$message("添加分类");
					}else if(key=='2-2'){
						v.$message("添加轮播图");
					}else if(key=='3-2'){
						v.$message("添加商品");
					}else{
						v.currentIndex=key;
					}
				}
			}
		});
	</script>
</html>
